<template>
  <div class="songlist-page">
    <van-nav-bar title="推荐歌单" left-arrow @click-left="$router.back()" />
    <div class="section-title">为你精选</div>
    <div class="songlist-grid">
      <div class="songlist-item" v-for="item in songLists" :key="item.id">
        <img :src="item.url" class="songlist-cover" />
        <div class="songlist-name">{{ item.name }}</div>
        <div class="songlist-desc">{{ item.desc }}</div>
        <div class="songlist-meta">
          <span class="songlist-tag">{{ item.tag }}</span>
          <span class="songlist-fav">{{ item.fav }} 收藏</span>
        </div>
      </div>
    </div>
    <div class="section-title">热门推荐</div>
    <div class="songlist-grid">
      <div class="songlist-item" v-for="item in hotList" :key="item.id">
        <img :src="item.url" class="songlist-cover" />
        <div class="songlist-name">{{ item.name }}</div>
        <div class="songlist-desc">{{ item.desc }}</div>
        <div class="songlist-meta">
          <span class="songlist-tag">{{ item.tag }}</span>
          <span class="songlist-fav">{{ item.fav }} 收藏</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const songLists = ref([
  { id: 1, url: 'https://img2.baidu.com/it/u=1858292141,3587727348&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', name: '90后回忆录', desc: '90后的青春记忆', tag: '怀旧', fav: 12345 },
  { id: 2, url: 'https://imge.kugou.com/stdmusic/20240427/20240427191301775727.jpg', name: '助眠神曲', desc: '助你安然入睡', tag: '助眠', fav: 8888 },
  { id: 3, url: 'https://imge.kugou.com/stdmusic/20220507/20220507113657285312.jpg', name: '车载音乐', desc: '开车必备歌单', tag: '车载', fav: 6666 },
  { id: 4, url: 'https://img2.baidu.com/it/u=168590827,1280265529&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', name: '华语经典', desc: '经典华语歌曲合集', tag: '华语', fav: 15678 },
  { id: 5, url: 'https://img1.baidu.com/it/u=4050763066,3874124631&fm=253&app=120&f=JPEG?w=1422&h=800', name: '欧美流行', desc: '最新欧美热门歌曲', tag: '欧美', fav: 11234 },
  { id: 6, url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fca40d6d8-a3b6-46e9-bcde-b4921fbb242a%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1754447781&t=10ba78ceef3946462699a793ee042893', name: '日韩精选', desc: '日韩流行音乐精选', tag: '日韩', fav: 9876 },
  { id: 7, url: 'https://imge.kugou.com/stdmusic/20220507/20220507113657285312.jpg', name: '轻音乐', desc: '放松心情的轻音乐', tag: '轻音乐', fav: 5432 },
  { id: 8, url: 'https://img2.baidu.com/it/u=832167251,3937156032&fm=253&app=138&f=JPEG?w=800&h=800', name: '古风歌曲', desc: '中国风古风音乐', tag: '古风', fav: 8765 }
])
const hotList = ref([
  { id: 9, url: 'https://img2.baidu.com/it/u=1858292141,3587727348&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', name: '流行金曲', desc: '流行榜单热歌', tag: '流行', fav: 9999 },
  { id: 10, url: 'https://imge.kugou.com/stdmusic/20240427/20240427191301775727.jpg', name: '经典老歌', desc: '回忆杀', tag: '经典', fav: 7777 },
  { id: 11, url: 'https://img1.baidu.com/it/u=957196105,1301106212&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422', name: '抖音热歌', desc: '抖音爆款歌曲合集', tag: '抖音', fav: 23456 },
  { id: 12, url: 'https://p1.music.126.net/RF5yvafkDq98c5xOb8Uupg==/109951163442212449.jpg', name: '电音派对', desc: '动感电音舞曲', tag: '电音', fav: 6789 },
  { id: 13, url: 'https://img2.baidu.com/it/u=832167251,3937156032&fm=253&app=138&f=JPEG?w=800&h=800', name: '民谣精选', desc: '温暖民谣歌曲', tag: '民谣', fav: 4567 },
  { id: 14, url: 'https://img0.baidu.com/it/u=3315620404,701141190&fm=253&app=138&f=JPEG?w=834&h=800', name: '摇滚经典', desc: '经典摇滚音乐', tag: '摇滚', fav: 3456 }
])
</script>
<style scoped>
.songlist-page { background: var(--van-background-color, #fff); min-height: 100vh; color: var(--van-text-color, #222); }
.section-title { font-weight: bold; margin: 18px 0 8px 16px; font-size: 15px; }
.songlist-grid { display: flex; flex-wrap: wrap; gap: 16px; padding: 0 16px; }
.songlist-item { width: 44%; background: #f7f7f7; border-radius: 10px; padding: 10px; box-sizing: border-box; }
.songlist-cover { width: 100%; height: 80px; border-radius: 8px; object-fit: cover; }
.songlist-name { font-weight: bold; margin: 6px 0 2px 0; }
.songlist-desc { color: #888; font-size: 12px; margin-bottom: 4px; }
.songlist-meta { font-size: 12px; color: #aaa; display: flex; justify-content: space-between; }
.songlist-tag { background: #eee; color: #888; border-radius: 6px; padding: 1px 6px; }
.songlist-fav { color: #f56c6c; }
</style> 